<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本文件用于演示边距折叠规则中必须紧紧相邻这个特点</title>
	    <style>
			.d1, .d2{
				width: 150px;
				height: 150px;
			}
			.d1 {
				background-color: #0000FF;
				margin-bottom: 10px;
				margin-top: 20px;
				/* 父元素的border大于0.
				会导致子元素的顶部与父元素所在容器不再紧紧相邻。
				这时候边距折叠将不会生效
				但父元素的border宽度大于0不会影响相邻元素的边距折叠*/
				border: #7FFFD4 solid 1px;
			}
			.d2{
				margin-top: 5px;
				background-color: darkgreen;
			}
			.d1_1 {
				width: 100px;
				height: 100px;
				background-color: #8B0000;
				margin-top: 10px;
			}
		</style>
	</head>
	
	<body>
		<div class="d1">
			<div class="d1_1">
			</div>
		</div>
		
		<div class="d2">
		</div>
	</body>
</html>
